<template>
  <div id="echarts3"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  mounted() {
    this.showEcharts3()
  },
  created() {},
  methods: {
    showEcharts3() {
      let myChart = this.$echarts.init(document.getElementById('echarts3'))
      let data2 = this.data
      let nameList = data2.map((m) => m.name)
      let valueList = data2.map((m) => m.value)
      const color = ['#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05'] //2个以上的series就需要用到color数组'#EAEA26',

      let option = {
        // legend: {
        //   top: '5%',
        //   data: ['小营收'],
        //   textStyle: {
        //     color: '#fff',
        //   },
        // },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          top: 20,
          left: 10,
          right: 10,
          bottom: 15,
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: nameList,
            // axisPointer: {
            //   type: 'shadow',
            // },
            axisLabel: {
              interval: 0, //这个一定要有，别忘记了
              rotate: 20,
              textStyle: {
                color: '#fff',
                fontSize: 12,
              },
            },
            splitLine: {
              show: false, //不显示grid水平分割线
            },
          },
        ],
        yAxis: [
          {
            type: 'log',
            name: '单位（个）',
            // interval: 200,
            axisLabel: {
              formatter: '{value}',
              color: '#fff',
            },
            splitLine: {
              show: false,
              // lineStyle: {
              //   color: '#053c89',
              // },
            },
          },
        ],
        series: [
          {
            //柱底圆片
            name: '',
            yAxisIndex: 0,
            type: 'pictorialBar',
            symbolSize: [20, 10], //调整截面形状
            symbolOffset: [0, 5],
            z: 12,
            tooltip: {
              show: true,
            },
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#A18400', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#A18400', // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: valueList,
          },
          {
            name: '',
            type: 'bar',
            barWidth: 20,
            yAxisIndex: 0,
            tooltip: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#AF9003', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#FFD826', // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: valueList,
          },
          {
            name: '',
            type: 'pictorialBar',
            yAxisIndex: 0,
            symbolSize: [20, 10], //调整截面形状
            symbolOffset: [0, -5],
            z: 12,
            label: {
              normal: {
                show: true,
                position: 'top',
                // left: '15',
                padding: [0, 0, 0, 0],
                // fontSize: 15,
                // fontWeight: 'bold',
                color: '#fff',
              },
            },
            tooltip: {
              show: false,
            },
            symbolPosition: 'end',
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#FFD412', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#FFD412', // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: valueList,
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>
